<template>
  <view class="user" :style="[background]">
    <view class="header">
      <!-- #ifndef  H5 -->
      <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
        <u-navbar
            :is-back="false"
            title="我的"
            :title-bold="true"
            :is-fixed="false"
            :border-bottom="false"
            :background="{ background: 'rgba(256,256, 256,' + navBg + ')' }"
            :title-color="navBg > 0.5 ? '#000' : '#000206'"
        ></u-navbar>
      </u-sticky>
      <!-- #endif -->
      <view class="user-info row-between">
        <view class="info row">
          <image
              class="avatar mr20 flexnone"
              @tap="goLogin"
              :src="isLogin ? userInfo.avatar : '/static/images/my_portrait_empty.png'"
          ></image>
          <view class="white" v-if="isLogin">
            <view class="name xxl line1 ml20">
              <text class="nickname-text">{{ userInfo.nickname }}</text>
              <text class="btn-group">{{ isLogin ? userInfo.group_name : '普通' }}</text>
            </view>
            <view class="user-id row-between" v-if="userInfo.sn">
              <view class="xs ml20 mr20 account mt10">账号: {{ userInfo.sn || '' }}</view>
              <!--              <view class="xs normal copy-btn row-center ml5" @tap.stop="onCopy"-->
              <!--              >复制-->
              <!--              </view>-->
            </view>
          </view>
          <view class="white" v-else @tap="goLogin">
            <view style="font-size: 42rpx">点击登录</view>
            <view class="sm">登录体验更多功能</view>
          </view>
        </view>
      </view>
      <view class="member column-end mt30" @tap="goPage('/bundle/pages/user_spread/user_spread')" v-if="userInfo.group_id === 1">
        <view class="member-entery row-between">
          <view class="row">
            <view class="service-info">
              <view class="service">服务商</view>
              <view class="sm">申请服务商即可享受</view>
            </view>
          </view>
          <view class="row go-form">
            <view class="sm">去申请</view>
          </view>
        </view>
      </view>
    </view>
    <view class="order-nav bg-white" v-if="userInfo.group_id === 2">
      <view class="title row-between" @tap="goPage('/pages/user_order/user_order')">
        <view class="lg">我的订单</view>
        <view class="muted sm row">
          <image class="icon-sm ml10" src="/static/images/arrow_right.png"></image>
        </view>
      </view>
      <view class="nav row">
        <view
            class="item column-center mb20"
            @tap="goPage('/pages/user_order/user_order?type=pay')"
        >
          <view class="icon-contain">
            <view v-if="userInfo.wait_pay" class="badge xs row-center bg-white">
              {{ userInfo.wait_pay }}
            </view>
            <image class="nav-icon" src="/static/images/icon_my_payment.png"></image>
          </view>
          <view class="sm mt10">待付款</view>
        </view>
        <view
            class="item column-center mb20"
            @tap="goPage('/pages/user_order/user_order?type=delivery')"
        >
          <view class="icon-contain">
            <view v-if="userInfo.wait_delivery" class="badge xs row-center bg-white">
              {{ userInfo.wait_delivery }}
            </view>
            <image class="nav-icon mb10" src="/static/images/icon_my_fahuo.png"></image>
          </view>
          <view class="sm">待发货</view>
        </view>
        <view
            class="item column-center mb20"
            @tap="goPage('/pages/user_order/user_order?type=delivery')"
        >
          <view class="icon-contain">
            <view v-if="userInfo.wait_take" class="badge xs row-center bg-white">
              {{ userInfo.wait_take }}
            </view>
            <image class="nav-icon" src="/static/images/icon_my_shouhuo.png"></image>
          </view>
          <view class="sm mt10">待收货</view>
        </view>
        <view
            class="item column-center mb20"
            @tap="goPage('/bundle/pages/goods_comment_list/goods_comment_list')"
        >
          <view class="icon-contain">
            <view v-if="userInfo.wait_comment" class="badge xs row-center bg-white">
              {{ userInfo.wait_comment }}
            </view>
            <image class="nav-icon" src="/static/images/icon_my_pingjia.png"></image>
          </view>
          <view class="sm mt10">商品评价</view>
        </view>
        <view
            class="item column-center mb20"
            @tap="goPage('/bundle/pages/post_sale/post_sale')"
        >
          <view class="icon-contain">
            <view v-if="userInfo.after_sale" class="badge xs row-center bg-white">
              {{ userInfo.after_sale }}
            </view>
            <image class="nav-icon" src="/static/images/icon_my_shouhou.png"></image>
          </view>
          <view class="sm mt10">退款/售后</view>
        </view>
      </view>
    </view>
    <view class="server-nav bg-white">
      <view class="row-info row-between bdb-line mt10" @tap="goPage('/pages/user_address/user_address')">
        <view class="label md"><u-icon name="map" size="36" class="mr10"></u-icon>地址管理</view>
        <u-icon name="arrow-right"/>
      </view>
      <view class="row-info row-between bdb-line mt10" @tap="goPage('/pages/user_order/user_order')">
        <view class="label md"><u-icon name="order" size="36" class="mr10"></u-icon>我的订单</view>
        <u-icon name="arrow-right"/>
      </view>
      <view class="row-info row-between bdb-line mt10" @tap="goPage('/bundle/pages/about_us/about_us')">
        <view class="label md"><u-icon name="info-circle" size="36" class="mr10"></u-icon>关于我们</view>
        <u-icon name="arrow-right"/>
      </view>
      <view class="row-info row-between bdb-line mt10" @tap="goPage('/bundle/pages/user_profile/user_profile')">
        <view class="label md"><u-icon name="more-circle" size="36" class="mr10"></u-icon>其他</view>
        <u-icon name="arrow-right"/>
      </view>
    </view>
    <view class="xs" style="margin: 50rpx 0;">
        <view class="row-center">
          <image src="/static/images/icon_tel.png" class="mr10 icon-tel"></image>问题反馈 <view class="xs tel">0241-123456411</view>
        </view>
  </view>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {getUser} from '@/api/user'
import {getMenu} from '@/api/store'
import {toLogin, wxMnpLogin} from '@/utils/login'
import {menuJump, copy, setTabbar} from '@/utils/tools'
import Cache from '@/utils/cache'

const app = getApp()
export default {
  data() {
    return {
      showNav: false,
      navH: 0,
      navBg: 0,
      menuList: [],
      statusBarH: ''
    }
  },

  components: {},
  props: {},

  onLoad(options) {
    setTabbar()
    this.getMenuFun()
  },

  onShow() {
    this.getUser()
    this.getCartNum()
  },
  onPageScroll(e) {
    const top = uni.upx2px(100)
    const {scrollTop} = e
    let percent = scrollTop / top > 1 ? 1 : scrollTop / top
    this.navBg = percent
  },

  onUnload() {
  },
  onPullDownRefresh() {
    this.getUser().then(() => {
      uni.stopPullDownRefresh()
    })
    this.getMenuFun()
  },
  onShareAppMessage() {
    const shareInfo = Cache.get('shareInfo')
    return {
      title: shareInfo.mnp_share_title,
      path: 'pages/index/index?invite_code=' + this.inviteCode,
      imageUrl: shareInfo.mnp_share_image
    }
  },
  methods: {
    ...mapActions(['getCartNum', 'getUser']),
    goLogin() {
      let {isLogin} = this
      if (isLogin) {
        uni.navigateTo({
          url: '/bundle/pages/user_set/user_set'
        })
        return
      }
      toLogin()
    },

    goPage(url) {
      if (!this.isLogin) return toLogin()
      uni.navigateTo({
        url
      })
    },
    tapMenu(item) {
      if (!this.isLogin) return toLogin()
      console.log(item)
      menuJump(item)
    },
    async getMenuFun() {
      const {data, code} = await getMenu({
        type: 2
      })
      if (code == 1) {
        this.menuList = data
      }
    },

    onCopy(e) {
      copy(this.userInfo.sn)
    }
  },
  computed: {
    ...mapGetters(['cartNum', 'userInfo', 'inviteCode', 'appConfig']),
    background() {
      const {center_setting} = this.appConfig
      return center_setting.top_bg_image
          ? {
            'background-image': `url(${center_setting.top_bg_image})`
          }
          : {}
    }
  }
}
</script>
<style lang="scss">
page {
  background-image: url("../../static/images/my_bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;

  .user {

    .header {
      display: flex;
      flex-direction: column;
      //height: 390rpx;

      .user-info {
        padding: 20rpx 30rpx 10rpx;
        //#ifdef  H5
        padding-top: 90rpx;
        //#endif
        .avatar {
          height: 110rpx;
          width: 110rpx;
          border-radius: 50%;
          overflow: hidden;
        }

        .name {
          text-align: left;
          margin-bottom: 5rpx;
          max-width: 400rpx;
          color: #131430;
          font-size: 34rpx;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;

          .nickname-text {
            flex-shrink: 0; // 防止昵称文本被压缩
          }

          .btn-group {
            margin-left: 10rpx;
            flex-shrink: 0; // 防止按钮被压缩
            background-color: #fff;
            color: #2d6af4;
            border-radius: 36rpx;
            font-size: 18rpx;
            padding: 5rpx 15rpx;
          }
        }

        .user-id {
          //border: 1px solid white;
          //border-radius: 100rpx;

          .copy-btn {
            background-color: #ffdfda;
            height: 40rpx;
            width: 90rpx;
            border-radius: 100rpx;
          }
        }

        .user-opt {
          position: relative;

          .dot {
            position: absolute;
            background-color: #ee0a24;
            border: 2rpx solid #ffffff;
            color: $-color-primary;
            border-radius: 100%;
            top: 6rpx;
            right: 0rpx;
            font-size: 22rpx;
            min-width: 16rpx;
            height: 16rpx;
          }
        }

        .buyer-type {
          background-color: #ffa200;
          height: 38rpx;
          padding: 0 10rpx;
        }
      }

      .member {
        flex: 1;
        padding: 0 30rpx;
        color: #ffffff;

        .member-entery {
          padding: 0 16rpx;
          width: 100%;
          height: 130rpx;
          background: url(../../static/images/bg_member_grade.png);
          background-size: 100%;
        }

        .service {
          font-size: 30rpx;
        }
      }
    }

    .order-nav {
      .icon-contain {
        position: relative;
      }
    }

    .order-nav,
    .my-assets {
      margin: 20rpx 20rpx 0;
      border-radius: 8rpx;
    }

    .server-nav {
      margin:20rpx 30rpx;
      border-radius: 16rpx;
    }

    .title {
      height: 88rpx;
      padding: 0 30rpx;
      border-bottom: $-dashed-border;
    }

    .nav {
      padding: 26rpx 0 0;

      .assets-item {
        flex: 1;
      }

      .item {
        width: 25%;
      }

      .badge {
        padding: 0 6rpx;
        min-width: 28rpx;
        height: 28rpx;
        border-radius: 28rpx;
        box-sizing: border-box;
        border: 1rpx solid $-color-primary;
        color: $-color-primary;
        position: absolute;
        left: 33rpx;
        top: -10rpx;
        z-index: 2;
      }

      .nav-icon {
        width: 52rpx;
        height: 52rpx;
      }
    }
  }

  .account {
    color: #acaeb2;
  }

  .service-info {
    margin-left: 85rpx;
  }

  .go-form {
    margin-right: 68rpx;
    margin-top: 10rpx;
  }

  .user-avatar-box {
    padding: 30rpx 20rpx;
    background-color: white;
    border-top-left-radius: 28rpx;
    border-top-right-radius: 28rpx;

    .user-avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
  }

  .row-info {
    padding: 30rpx 20rpx;
    .label {
      width: 180rpx;
    }

    .bd-btn {
      padding: 8rpx 24rpx;
      border: 1px solid $-color-primary;
      color: $-color-primary;
    }
  }
  .icon-tel{
    width: 53rpx;
    height: 53rpx;
  }
  .tel{
    color: #2d6af4;
    margin-left: 10rpx;
  }
}
</style>
